import { CopyOutlined } from "@ant-design/icons"
import { Typography } from "antd"
import React from "react"

import { Toast } from "@/components/messages"
import { useLocale } from "@/locales"

const { Paragraph } = Typography

interface CopyProps {
	title: string | number
	textColor?: boolean
}

const Copy: React.FC<CopyProps> = ({ title, textColor = false }) => {
	const { formatMessage } = useLocale()

	const handleCopy = () => {
		navigator.clipboard.writeText(String(title)).then(() => {
			Toast.success(formatMessage({ id: "common.copy" }))
		})
	}

	const textStyle = textColor ? { color: "#409EFF" } : {}

	return (
		<Paragraph style={{ cursor: "pointer", overflow: "hidden", textOverflow: "ellipsis" }} onClick={handleCopy} ellipsis>
			<span style={textStyle}>{title}</span>
			{!!title && <CopyOutlined style={{ marginLeft: 5 }} />}
		</Paragraph>
	)
}

export default Copy
